<script>
export default {
  name: "Front",
  data(){
    return{
      user:localStorage.getItem("user")? JSON.parse(localStorage.getItem("user")):{}
    }
  },
  methods:{
    logout(){
      this.$store.commit("logout");
      this.$message.success("退出成功")
    },
    getUser(){
      let userName=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).userName :"";
      if(userName) {
        this.request.get("/user/userName/" + userName).then(res => {
          this.user = res.data;
        })
      }
    }
  }
}
</script>

<template>
  <div>
    <div style="display: flex;height:60px;line-height: 60px;border-bottom:1px solid #eee">
      <div style="width:300px;display: flex;padding-left: 30px">
        <div style="width: 60px">
          <img src="../../assets/logo3.png" alt="" style="width: 60px;height:55px;position:relative;top:3px;right:0"/>
        </div>
        <div style="flex:1">XXXX前台系统</div>
      </div>
      <div style="flex:1;margin-left: 200px" >
        <el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal" router>
          <el-menu-item index="/front/home">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-submenu>
          <el-menu-item index="/front/publish">发表文章</el-menu-item>
          <el-menu-item index="/front/article">文章列表</el-menu-item>
          <el-menu-item index="5">消息中心</el-menu-item>
        </el-menu>
      </div>
    <div style="width:200px">
    <div v-if="!user.userName" style="text-align: right;padding-right:30px">
     <el-button type="text" @click="$router.push('/login')" style="font-size: 15px" round>登录</el-button>
     <el-button type="text" @click="$router.push('/register')" style="font-size: 15px" round>注册</el-button>
    </div>
      <div v-else>
        <el-dropdown style="width: 150px; cursor: pointer; text-align: right">
        <div style="display:inline-block">
          <img :src="user.avatar" alt="" style="width:30px;border-radius: 50%;position:relative;top:14px;right:8px"/>
         <span>{{user.userName}}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
        </div>
          <el-dropdown-menu slot="dropdown" style="width:100px;text-align: center">
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
              <router-link to="/front/person">个人信息</router-link>
            </el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
              <router-link to="/front/password">修改密码</router-link>
            </el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 0">
              <span style="text-decoration: none"  @click="logout">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    </div>
    <div style="width:1000px;margin:0 auto;">
      <router-view @refreshUser="getUser" style="margin:10px auto"/>
    </div>
  </div>
</template>

<style scoped>

</style>
